<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
  <link rel="stylesheet" href="css/ui-box.css">
  <link rel="stylesheet" href="css/ui-base.css">
  <link rel="stylesheet" href="css/ui-color.css">
  <link rel="stylesheet" href="css/appcan.icon.css">
  <link rel="stylesheet" href="css/appcan.control.css">
  <link rel="stylesheet" href="css/BaggageTrace.css">
  <link rel="stylesheet" href="css/base.css">
</head>

<body class="um-vp bcF8F8F8" ontouchstart>
  <main class="fs9">
      <img src="images/bg.png" style="display:none;" />    
    <canvas id = "watermark" width = "200px"  height = "100px" style="display:none;"></canvas>
    <canvas id = "repeat-watermark"></canvas>
    <div id="app-flightInfo" class="ub wtp95 mat pre top10 ub-pj tx-c bor_bot_9B9B9B pb10">
      <section class="ub ub-ver">
        <p class="mb5" data-bind="text:airportName"></p>
        <div class="ub">
          <p class="mr5 c9B9B9B" data-bind="text:arrive"></p>
          <p class="c9B9B9B" data-bind="text:arriveDate"></p>
        </div>
      </section>
      <section class="ub ub-ver">
        <p data-bind="text:flightNo"></p>
        <div class="imgStyle icons_src_BT_1002 h5"></div>
        <p class="" data-bind="text:flightDate"></p>
      </section>
      <section class="ub ub-ver">
        <p class="mb5" data-bind="text:destinationName"></p>
        <div class="ub">
          <p class="mr5 c9B9B9B" data-bind="text:depart"></p>
          <p class="c9B9B9B" data-bind="text:departDate"></p>
        </div>
      </section>
    </div>

    <div class="ub ub-ver wtp95 mat pre top10 tx-c">
      <p class="mat c9B9B9B pt10">
        行李分类
      </p>
      <div class="wtp95 ub ub-pj mat mt10">
        <div class="ub lh18 bca38daab bra02 wtp45 cfff pl5">
          <p>
            行李总数 :
          </p>
          <p id="bagTotalCount" class="pl2">

          </p>
        </div>
        <div id="vipBtn" class="ub lh18 bcDF5593 bra02 wtp45 cfff pl5 icons_style_r icons_src_BT_rightwhite">
          <p>
            高端行李总数 :
          </p>
          <p id="bagVipCount" class="pl2">

          </p>
        </div>
      </div>
    </div>

    <!-- 饼状图开始  -->
    <div id="container" style="min-height: 25em" class="ub wtp95 mat pre top10 tx-c bcF8F8F8">

    </div>
    <!-- 饼状图结束  -->
    <div id="airportShow">
      <div id="baggageScan" class="ub ub-ver wtp95 mat pre top10 bcFFF bra02 mb10">
        <p class="lh22 tx-l bor_bot_E7E7E7 pl5 icons_style_r icons_src_BT_rightArrows">行李扫描</p>
        <div class="ub  ub-pj lh20">
          <p class="pl5">托运行李总数</p>
          <p class="pr5" data-bind="text:total">100</p>
        </div>
        <div class="ub  ub-pj lh20">
          <p class="pl5">分拣行李数</p>
          <p class="pr5" data-bind="text:sortCount"></p>
        </div>
        <div class="ub  ub-pj lh20">
          <p class="pl5">交接行李数</p>
          <p class="pr5" data-bind="text:actSortCount"></p>
        </div>
        <div class="ub  ub-pj lh20">
          <p class="pl5">装机总数</p>
          <p class="pr5" data-bind="text:loadCount"></p>
        </div>
        <div class="ub  ub-pj lh20">
          <p class="pl5">到达总数</p>
          <p class="pr5" data-bind="text:actArrivalCount"></p>
        </div>

      </div>
    </div>

  </main>
</body>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/z_API.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/talkingdata.js"></script>
</body>
<script>
  appcan.ready(function() {
    //获取航班信息对象
    iG.bgm();
    var flightObj = JSON.parse(appcan.locStorage.getVal("flightObj"));
    //是否显示扫描模块 true显示 false不显示
    var airportShow = appcan.locStorage.getVal("airportShow");

    //高端行李请求参数
    appcan.locStorage.setVal("destination",flightObj.destination);

    if (airportShow === "false") {

      $("#airportShow").css("display", "none");
    }
    if (flightObj) {
      var flightBindModel = new MVVM.Model({
        airportName: flightObj.airportName,
        arrive: flightObj.arrive,
        arriveDate: flightObj.arriveDate,
        depart: flightObj.depart,
        departDate: flightObj.departDate,
        destinationName: flightObj.destinationName,
        flightDate: flightObj.flightDate,
        flightNo: flightObj.flightNo

      });

      //航班列表
      var flightVieModel = new MVVM.ViewModel({
        el: "#app-flightInfo",
        model: flightBindModel
      });
    }

    //行李扫描
    var flightHaveBagCountObj = JSON.parse(appcan.locStorage.getVal("flightHaveBagCount"));
    //alert(flightHaveBagCountObj.actArrivalCount)
    var baggageTotalModel = new MVVM.Model({

      sortCount: flightHaveBagCountObj.sortCount,
      loadCount: flightHaveBagCountObj.loadCount,
      actArrivalCount: flightHaveBagCountObj.actArrivalCount,
      actSortCount: flightHaveBagCountObj.actSortCount,
      total: flightHaveBagCountObj.total
    });
    var baggageTotalView = new MVVM.ViewModel({
      el: "#baggageScan",
      model: baggageTotalModel
    });

    //行李分类
    $("#bagTotalCount").html(flightHaveBagCountObj.total);
    $("#bagVipCount").html(flightHaveBagCountObj.vipCount);
    //alert(flightHaveBagCountObj.vipCount)
    $('#container').highcharts({
      colors: ["#3BBBD8", "#627FCD", "#DFBB6D"], //饼图的每块区域的颜色
      title: {
        text: null //标题可为空
      },
      chart: {
        type: "pie", //饼状图
        backgroundColor: '#F8F8F8' //背景颜色
      },
      plotOptions: {
        series: {
          allowPointSelect: true //可以被选择
        }
      },
      series: [{
        type: "pie",
        name: "行李分类",
        data: [
          ['到达:' + flightHaveBagCountObj.arrivalCount, flightHaveBagCountObj.arrivalCount],
          ['中转:' + flightHaveBagCountObj.bagTransferCount, flightHaveBagCountObj.bagTransferCount],
          ['过站:' + flightHaveBagCountObj.throughCount, flightHaveBagCountObj.throughCount]
        ]
      }],
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}<br>' + "百分比" + ': <b>{point.percentage:.1f}%</b>',
        backgroundColor: '#FFFFFF', // 背景颜色
        borderColor: 'black', // 边框颜色
        borderRadius: 2, // 边框圆角
        borderWidth: 1, // 边框宽度
        shadow: false, // 是否显示阴影
        animation: true, // 是否启用动画效果
        style: { // 文字内容相关样式
          color: "#3BBBD7",
          fontSize: $("html").css("fontSize"),
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          dataLabels: {
            enabled: true,
            //format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
              color: 'black',
              fontSize: $("html").css("fontSize")
            }
          },
          showInLegend: true
        }
      },
      legend: {
        //图例
        layout: 'horizontal',
        backgroundColor: "#F8F8F8",
        align: 'center',
        symbolWidth: 40,
        verticalAlign: 'bottom',
        itemStyle: {
          fontSize: $("html").css("fontSize"),
        },
      },
      credits: {
        enabled: false // 禁用版权信息
      }
    });

    //行李扫描按钮
    $("#baggageScan").click(function() {

      IC.talkingDataCount("行李服务","16");

      var url = appcan.locStorage.getVal("baggageHttp");
      var param = {
        destination: flightObj.destination, //机场三字码
        flightNo: flightObj.flightNo, //航班号
        flightDate: flightObj.flightDate, //航班日期
        token: token //唯一标识符
      }

      var remark = "航班号:" + flightObj.flightNo + ",出发站三字码:" + flightObj.airport + ",到达站三字码:" + flightObj.destination + ",航班日期:"+flightObj.flightDate + ",操作时间:" + getNowDateHourMinutes();
      operatingRecord(userName,"行李扫描查询",remark);

      var resqust = new AJAXRequestData();
      resqust.url = url + "zyh_queryBags";
      resqust.type = "POST";
      resqust.data = param;
      resqust.getData(function(res) {
        res.forEach(function(item) {
          if (!item.ckiNumber) {
            item.ckiNumber = "暂无";
          }
        });
        //alert(res.length);
        appcan.locStorage.setVal("bagsInfos", res);

        appcan.window.open({
          name: "BaggageFlightbaggageListPage",
          dataType: 0,
          aniId: 5,
          data: "BaggageFlightbaggageListPage.html",
        });
      });

    });

    //高端行李按钮
    $("#vipBtn").click(function(){

      IC.talkingDataCount("行李服务","16");

      appcan.window.open({
        name: "BaggageVIPPage",
        dataType: 0,
        aniId: 5,
        data: "BaggageVIPPage.html",
      });
    });
  });
</script>

</html>
